<template>
<div class="mobile_menu">
    <div
        v-for="item in state.data"
        :key="item.id"
    >
        <div
            class="menu-item"
            :class="{ active: is_menu_toggle === item.path }"
            @click="urlToPath(item)"
        >
            <Icon :name="item.icon" size="18" />
            <span>{{ item.name }}</span>
        </div>
    </div>

    <div>
        <div
            class="menu-item"
            :class="{ active: is_menu_toggle === 'users' }"
            @click="userPath"
        >
            <Icon name="iconfont icon-jurassic_user" size="18"/>
            <span>我的</span>
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {inject, reactive, ref, watch} from "vue";
import {useAiConfig} from "/@/stores/aiConfig";
import { useUserInfo } from '/@/stores/userInfo'

const userInfo = useUserInfo()
const route = useRoute()
const router = useRouter()
const is_menu_toggle = ref(route.name)
watch(() => route.name, (value) => {
    is_menu_toggle.value = value
})

const webConfig = useAiConfig()

const state = reactive({
    loading: true,
    login_show: inject('login_show', ref(false)),
    data: [
        {id: 1, name: '', icon: '', path: '', url: ''},
    ],
})

// 监听webConfig.menus
watch(() => webConfig.menus, (value) => {
    state.data = value.filter((item: any) => {
        return item.no_mobile == 1
    })
})

// // 获取菜单
// state.data = webConfig.menus.filter((item: any) => {
//     return item.no_mobile == 1
// })

function userPath() {
    if (userInfo.isLogin()) {
        router.push('/users')
    } else {
        state.login_show = !state.login_show
    }
}

function urlToPath(item: any) {
    if (!userInfo.isLogin() && item.no_login_valid == 1) {
        state.login_show = true
        return
    }

    if (item.menu_type == 'iframe') {
        router.push('/iframe?u=' + btoa(item.url))
    } else {
        router.push(item.url)
    }
}
</script>

<style scoped lang="scss">
.mobile_menu {
    display: none;
}
@media (max-width: 768px) {
    .mobile_menu {
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 8px 0;
        border-top: 1px solid var(--ct-border-color);
        background-color: var(--ba-bg-color-overlay);
        .menu-item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-decoration: none;
            color: var(--text-color-grey);
            align-items: center;
            span {
                margin-top: 2px;
                font-size: 12px;
            }
            &.active {
                color: var(--text-color-primary);
            }
        }
    }
}
</style>
